<template>
  <div class="header">
    <div></div>
    <div class="message">消息通知</div>
    <div class="contact">联系人</div>
  </div>
  <div class="content">
    <div id="praise" class="item">
      <div><img alt="" src="./img/love.png"></div>
      <span>赞</span>
    </div>
    <div id="review" class="item">
      <div><img alt="" src="./img/review.png"></div>
      <span>评论和@</span>
    </div>
    <div id="backturn" class="item">
      <div><img alt="" src="./img/fans.png"></div>
      <span>新粉丝</span>
    </div>
  </div>

  <!-- 消息回复 -->
  <div class="footer">
    <!-- 模板 -->
    <div id="item" class="item">
      <div class="avatar">
        <img alt=""
             src="https://img2.baidu.com/it/u=2213011263,92283710&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500">
      </div>
      <div class="recover">
        <div class="username">用户名</div>
        <div class="receive ">消息回复消息回复复消息回复复消息回复消息回复消息回复消息回复消回复复</div>
      </div>
      <div class="time">
        <div>3天前</div>
        <div>
          <div>1</div>
        </div>
      </div>
    </div>


    <!-- 一下相同内容部分 -->
    <div class="item">
      <div class="avatar">
        <img alt=""
             src="https://img2.baidu.com/it/u=2213011263,92283710&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500">
      </div>
      <div class="recover">
        <div class="username">用户名</div>
        <div class="receive ">消息回复消息回复复消息回复复消息回复消息回复消息回复消息回复消回复复</div>
      </div>
      <div class="time">
        <div>3天前</div>
        <div>
          <div>3</div>
        </div>
      </div>
    </div>
    <div class="item">
      <div class="avatar">
        <img alt=""
             src="https://img2.baidu.com/it/u=2213011263,92283710&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500">
      </div>
      <div class="recover">
        <div class="username">用户名</div>
        <div class="receive ">消息回复消息回复复消息回复复消息回复消息回复消息回复消息回复消回复复</div>
      </div>
      <div class="time">
        <div>3天前</div>
        <div>
          <div>1</div>
        </div>
      </div>
    </div>
    <div class="item">
      <div class="avatar">
        <img alt=""
             src="https://img2.baidu.com/it/u=2213011263,92283710&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500">
      </div>
      <div class="recover">
        <div class="username">用户名</div>
        <div class="receive ">消息回复消息回复复消息回复复消息回复消息回复消息回复消息回复消回复复</div>
      </div>
      <div class="time">
        <div>3天前</div>
        <div></div>
      </div>
    </div>
    <div class="item">
      <div class="avatar">
        <img alt=""
             src="https://img2.baidu.com/it/u=2213011263,92283710&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500">
      </div>
      <div class="recover">
        <div class="username">用户名</div>
        <div class="receive ">消息回复消息回复复消息回复复消息回复消息回复消息回复消息回复消回复复</div>
      </div>
      <div class="time">
        <div>3天前</div>
        <div></div>
      </div>
    </div>
    <div class="item">
      <div class="avatar">
        <img alt=""
             src="https://img2.baidu.com/it/u=2213011263,92283710&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500">
      </div>
      <div class="recover">
        <div class="username">用户名</div>
        <div class="receive ">消息回复消息回复复消息回复复消息回复消息回复消息回复消息回复消回复复</div>
      </div>
      <div class="time">
        <div>3天前</div>
        <div></div>
      </div>
    </div>
    <div class="item">
      <div class="avatar">
        <img alt=""
             src="https://img2.baidu.com/it/u=2213011263,92283710&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500">
      </div>
      <div class="recover">
        <div class="username">用户名</div>
        <div class="receive ">消息回复消息回复复消息回复复消息回复消息回复消息回复消息回复消回复复</div>
      </div>
      <div class="time">
        <div>3天前</div>
        <div></div>
      </div>
    </div>
    <div class="item">
      <div class="avatar">
        <img alt=""
             src="https://img2.baidu.com/it/u=2213011263,92283710&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500">
      </div>
      <div class="recover">
        <div class="username">用户名</div>
        <div class="receive ">消息回复消息回复复消息回复复消息回复消息回复消息回复消息回复消回复复</div>
      </div>
      <div class="time">
        <div>3天前</div>
        <div></div>
      </div>
    </div>
    <div class="item">
      <div class="avatar">
        <img alt=""
             src="https://img2.baidu.com/it/u=2213011263,92283710&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500">
      </div>
      <div class="recover">
        <div class="username">用户名</div>
        <div class="receive ">消息回复消息回复复消息回复复消息回复消息回复消息回复消息回复消回复复</div>
      </div>
      <div class="time">
        <div>3天前</div>
        <div></div>
      </div>
    </div>
    <div class="item">
      <div class="avatar">
        <img alt=""
             src="https://img2.baidu.com/it/u=2213011263,92283710&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500">
      </div>
      <div class="recover">
        <div class="username">用户名</div>
        <div class="receive ">消息回复消息回复复消息回复复消息回复消息回复消息回复消息回复消回复复</div>
      </div>
      <div class="time">
        <div>3天前</div>
        <div></div>
      </div>
    </div>
    <div class="item">
      <div class="avatar">
        <img alt=""
             src="https://img2.baidu.com/it/u=2213011263,92283710&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500">
      </div>
      <div class="recover">
        <div class="username">用户名</div>
        <div class="receive ">消息回复消息回复复消息回复复消息回复消息回复消息回复消息回复消回复复</div>
      </div>
      <div class="time">
        <div>3天前</div>
        <div></div>
      </div>
    </div>
    <div class="item">
      <div class="avatar">
        <img alt=""
             src="https://img2.baidu.com/it/u=2213011263,92283710&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500">
      </div>
      <div class="recover">
        <div class="username">用户名</div>
        <div class="receive ">消息回复消息回复复消息回复复消息回复消息回复消息回复消息回复消回复复</div>
      </div>
      <div class="time">
        <div>3天前</div>
        <div></div>
      </div>
    </div>
    <div class="item">
      <div class="avatar">
        <img alt=""
             src="https://img2.baidu.com/it/u=2213011263,92283710&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500">
      </div>
      <div class="recover">
        <div class="username">用户名</div>
        <div class="receive ">消息回复消息回复复消息回复复消息回复消息回复消息回复消息回复消回复复</div>
      </div>
      <div class="time">
        <div>3天前</div>
        <div></div>
      </div>
    </div>
    <div class="item">
      <div class="avatar">
        <img alt=""
             src="https://img2.baidu.com/it/u=2213011263,92283710&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500">
      </div>
      <div class="recover">
        <div class="username">用户名</div>
        <div class="receive ">消息回复消息回复复消息回复复消息回复消息回复消息回复消息回复消回复复</div>
      </div>
      <div class="time">
        <div>3天前</div>
        <div></div>
      </div>
    </div>
    <div class="item">
      <div class="avatar">
        <img alt=""
             src="https://img2.baidu.com/it/u=2213011263,92283710&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500">
      </div>
      <div class="recover">
        <div class="username">用户名</div>
        <div class="receive ">消息回复消息回复复消息回复复消息回复消息回复消息回复消息回复消回复复</div>
      </div>
      <div class="time">
        <div>3天前</div>
        <div></div>
      </div>
    </div>
    <div class="item">
      <div class="avatar">
        <img alt=""
             src="https://img2.baidu.com/it/u=2213011263,92283710&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500">
      </div>
      <div class="recover">
        <div class="username">用户名</div>
        <div class="receive ">消息回复消息回复复消息回复复消息回复消息回复消息回复消息回复消回复复</div>
      </div>
      <div class="time">
        <div>3天前</div>
        <div></div>
      </div>
    </div>
  </div>


</template>
<script setup>
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.header {
  display: flex;
  height: 40px;
  width: 100%;
  line-height: 40px;
  font-weight: 600;
  letter-spacing: 1px;
  margin-right: 10px;
  font-size: 18px;
  justify-content: space-between;
}

.header div {
  flex: 1;
}

.header .message {
  text-align: center;
}

.header .contact {
  text-align: end;
}

.content {
  border-top: 4px solid #f0f0f0;
  border-bottom: 4px solid #f0f0f0;
  padding: 10px 0;
  display: flex;
  width: 100%;
  margin-top: 10px;
}

.content .item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.content .item > div {
  width: 60px;
  height: 60px;
  padding: 15px;
}

.content .item > div > img {
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.content .item span {
  margin-top: 10px;
  font-size: 14px;
  display: inline-block;
  text-align: center;
}

.content .item:nth-child(1) > div {
  background: linear-gradient(to bottom left, #dc282b, #f76661);
}

.content .item:nth-child(2) > div {
  background: linear-gradient(to bottom left, #2fc1f0, #37d9ff);
}

.content .item:nth-child(3) > div {
  background: linear-gradient(to bottom left, #e49455, #ff9e4e);
}

.footer {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.footer .item {
  display: flex;
  background: #f6f6f6;
  height: 80px;
  padding: 10px;
  border-bottom: 1px solid #e3e3e3;
  cursor: pointer;
}

.footer .item .avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 20px;
}

.footer .item .avatar > img {
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.footer .item .recover {
  display: flex;
  flex-direction: column;
  flex: 1;
  line-height: 1.7;
}

.footer .item .recover > div {
  flex: 1;
}

.footer .item .recover .receive {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.footer .item .time {
  width: 60px;
  display: flex;
  flex-direction: column;
}

.footer .item .time > div {
  flex: 1;
  text-align: end;
}

.footer .item .time > div:nth-child(2) > div {
  width: 20px;
  height: 20px;
  display: inline-block;
  background: #fa0025;
  color: #fff;
  border-radius: 50%;
  text-align: center;
  line-height: 20px;
}

</style>